<template>
	<view class="page">
		<view class="top flex flex-j-center flex-a-center">
			<image class="top-model" src="../../../static/images/jewel/health/model.png" mode="widthFix"></image>
			<view class="top-btns">
				<view class="top-btns-item start" :class="{checking:!isCheck}" @click="start()">{{checkText}}</view>
				<view class="top-btns-item" @click="stop()">停止检测</view>
			</view>
		</view>
		<view class="box box-big">
			<view class="box-title">人体磁场信息波</view>
			<view class="box-cont">
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="line-charts"></canvas>
			</view>
		</view>
		<view class="flex flex-j-center">
			<view class="box box-small" v-for="(item,index) in canvasList" :key="index">
				<view class="box-title">{{item.title}}</view>
				<view class="box-cont box-canvas">
					<view class="box-cont-num" v-if="item.series[0]">{{Math.round(item.series[0].data*100)}}</view>
					<canvas :canvas-id="item.id" :id="item.id" class="bar-charts"></canvas>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaLineA = null;
	var canvaGauge0 = null;
	var canvaGauge1 = null;
	var LineAIds = null
	
	var canvaGaugeCategories = [
		{
			value: 0.2,
			color: '#128107'
		}, {
			value: 0.9,
			color: '#fbdf45'
		}, {
			value: 1,
			color: '#d0040a'
	}];
	var Data = {
		LineA: {
			categories: [],
			series: [
				{
					name: '',
					data: [0],
					color:"#41a117"
				}
			]
		}
	};
	
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				barWidth: '',
				barHeight: '',
				pixelRatio: 1,
				gaugeWidth:15,
				canvasList:[
					{
						id:"canvasGauge1",
						title:'检测项目指示器',
						series: [{
							name: '',
							data: 0
						}]
					},
					{
						id:"canvasGauge2",
						title:'人体磁场信息指示器',
						series: [{
							name: '',
							data: 0
						}]
					}
				],
				checkText:'开始检测',
				isCheck:false
			};
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			_self.cWidth = uni.upx2px(740);
			_self.cHeight = uni.upx2px(260);
			_self.barWidth = uni.upx2px(500);
			_self.barHeight = uni.upx2px(300);
			
			_self.showLineA('canvasLineA', Data.LineA);
			_self.showGauge();
		},
		methods: {
			start(){
				if(_self.isCheck) return
				_self.isCheck = true
				_self.checkText = '检测中'
				_self.getServerData();
				
				let series1=[{name:'',data:Math.random()}];
				let newTitleColor;
				for(let i=0;i<canvaGaugeCategories.length;i++){
					if(series1[0].data<=canvaGaugeCategories[i].value){
						newTitleColor=canvaGaugeCategories[i].color;
						break;
					}
				}
				canvaGauge0.updateData({
					series: series1,//这里给了新数值
					categories: canvaGaugeCategories,
					title: {
						color: newTitleColor
					}
				});
				
				let series2=[{name:'',data:Math.random()}];
				let newTitleColor2;
				for(let i=0;i<canvaGaugeCategories.length;i++){
					if(series2[0].data<=canvaGaugeCategories[i].value){
						newTitleColor2=canvaGaugeCategories[i].color;
						break;
					}
				}
				canvaGauge1.updateData({
					series: series2,//这里给了新数值
					categories: canvaGaugeCategories,
					title: {
						color: newTitleColor
					}
				});
				setTimeout(()=>{
					_self.canvasList[0].series[0].data = series1[0].data
					_self.canvasList[1].series[0].data = series2[0].data
				},500)
			},
			stop(){
				if(!_self.isCheck) return
				_self.isCheck = false
				_self.checkText = '开始检测'
				
				canvaLineA.updateData({
					series: [],
					categories: []
				});
				canvaGauge0.updateData({
					series: [{name:'',data:0}],//这里给了新数值
					categories: canvaGaugeCategories
				});
				canvaGauge1.updateData({
					series: [{name:'',data:0}],//这里给了新数值
					categories: canvaGaugeCategories
				});
				_self.canvasList[0].series[0].data = 0
				_self.canvasList[1].series[0].data = 0
				clearInterval(LineAIds);
				
			},
			getServerData() {
				let LineAs = { categories: [], series: [{name:'',data:[0]}]};
				// LineAs.categories = Data.LineA.categories;
				// LineAs.series = Data.LineA.series;
				//x轴数据
				for (var i = 60; i > 0; i--) {
					LineAs.categories.push(i);
				}
				//y轴数据
				for (i = 1; i < 61; i++) {
					LineAs.series[0].data.push(i);
					LineAs.series[0].color = "#41a117";
				}
				canvaLineA.updateData({
					series: LineAs.series,
					categories: LineAs.categories
				});
				// _self.showLineA('canvasLineA', LineA);
				//定时更新数据心率
				LineAIds = setInterval(function() {
					LineAs.series[0].data.push(Math.round(Math.random() * 1000));
					var j = 10;
					//如果x轴数据大于坐标，就把左边的数据清掉。
					if (LineAs.series[0].data.length > 60) {
						LineAs.series[0].data.shift();
					}
					j = j + 100;
					if (j > 90000) {
						clearInterval(LineAIds);
					}
					// _self.showLineA('canvasLineA', LineA);
					canvaLineA.updateData({
						series: LineAs.series,
						categories: LineAs.categories
					});
				}, 100);
				
				//定时更新
				
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					colors:['#ff0000'],
					legend: false,
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					xAxis: {
						disabled: true, //不显示x轴
						disableGrid: true,
						type: 'grid',
						gridColor: '#f2f2f2',
						gridType: 'solid',
						dashLength: 2
					},
					yAxis: {
						disabled: true, //不显示y轴
						disableGrid: true,
						gridType: 'solid',
						gridColor: '#f2f2f2',
						dashLength: 2,
						splitNumber: 20,
						min: -100,
						max: 1200,
						format: val => {
							return val.toFixed(0);
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						lineStyle: 'straight'
					}
				});
			},
			showGauge(){
				let canvasList = _self.canvasList
				canvaGauge0 = new uCharts({
					$this:_self,
					canvasId: canvasList[0].id,
					type: 'gauge',
					fontSize:12,
					legend:false,
					title: {
						name: '',
						color: canvaGaugeCategories[1].color,
						fontSize: 20*_self.pixelRatio,
						offsetY:-60*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
						offsetX:60*_self.pixelRatio,//新增参数，自定义调整X轴文案距离
					},
					subtitle: {
						name: canvasList[0].series[0].name,
						color: '#666666',
						fontSize: 15*_self.pixelRatio,
						offsetY:-50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
					},
					extra: {
						gauge:{
							type:'default',
							width: _self.gaugeWidth*0.8*_self.pixelRatio,//仪表盘背景的宽度
							startAngle:1,
							endAngle:1,
							startNumber:0,
							endNumber:100,
							splitLine:{
								fixRadius:'none',
								splitNumber:5,
								width: _self.gaugeWidth*_self.pixelRatio,//仪表盘背景的宽度
								color:'#FFFFFF',
								childNumber:10,
								childWidth:_self.gaugeWidth*0.4*_self.pixelRatio,//仪表盘背景的宽度
							},
							pointer:{
								width: _self.gaugeWidth*0.8*_self.pixelRatio,//指针宽度
								color:'auto'
							}
						}
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: canvaGaugeCategories,
					series: canvasList[0].series,
					animation: true,
					width: _self.barWidth*_self.pixelRatio,
					height: _self.barHeight*_self.pixelRatio,
					dataLabel: true
				});
				
				canvaGauge1 = new uCharts({
					$this:_self,
					canvasId: canvasList[1].id,
					type: 'gauge',
					fontSize:12,
					legend:false,
					title: {
						name: '',
						color: canvaGaugeCategories[1].color,
						fontSize: 20*_self.pixelRatio,
						offsetY:-60*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
						offsetX:60*_self.pixelRatio,//新增参数，自定义调整X轴文案距离
					},
					subtitle: {
						name: canvasList[1].series[0].name,
						color: '#666666',
						fontSize: 15*_self.pixelRatio,
						offsetY:-50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
					},
					extra: {
						gauge:{
							type:'default',
							width: _self.gaugeWidth*0.8*_self.pixelRatio,//仪表盘背景的宽度
							startAngle:1,
							endAngle:1,
							startNumber:0,
							endNumber:100,
							splitLine:{
								fixRadius:'none',
								splitNumber:5,
								width: _self.gaugeWidth*_self.pixelRatio,//仪表盘背景的宽度
								color:'#FFFFFF',
								childNumber:10,
								childWidth:_self.gaugeWidth*0.4*_self.pixelRatio,//仪表盘背景的宽度
							},
							pointer:{
								width: _self.gaugeWidth*0.8*_self.pixelRatio,//指针宽度
								color:'auto'
							}
						}
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: canvaGaugeCategories,
					series: canvasList[1].series,
					animation: true,
					width: _self.barWidth*_self.pixelRatio,
					height: _self.barHeight*_self.pixelRatio,
					dataLabel: true
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page{
		background-color: #FFFFFF;
	}
	
	.flex{
		display: flex;
		&1{
			flex: 1;
		}
		&-a-center{
			align-items: center;
		}
		&-a-start{
			align-items: flex-start;
		}
		&-a-end{
			align-items: flex-end;
		}
		&-j-center{
			justify-content: center;
		}
		&-j-start{
			justify-content: flex-start;
		}
		&-j-end{
			justify-content: flex-end;
		}
	}
	.top{
		padding: 30rpx 0;
		&-model{
			width: 338rpx;
			height: 543rpx;
		}
		&-btns{
			&-item{
				width: 240rpx;
				line-height: 76rpx;
				text-align: center;
				font-size: 36rpx;
				border: 1px solid #128107;
				border-radius: 10rpx;
				margin: 25rpx 0;
				color: #128107;
			}
			.start{
				background-color: gray;
				border-color: gray;
				color: #FFFFFF;
			}
			.checking{
				background-color: #128107;
				border-color: #128107;
			}
		}
	}
	.box{
		border-radius: 10rpx;
		overflow: hidden;
		border: 1px solid #4ab846;
		&-title{
			background-color: #e2eada;
			border-bottom: 1px solid #4ab846;
			text-align: center;
			font-size: 32rpx;
			line-height: 92rpx;
		}
		&-canvas{
			position: relative;
			width: 330rpx;
			height: 240rpx;
			overflow: hidden;
		}
		&-small{
			margin: 0 8rpx{
				bottom: 20rpx;
			};
		}
		&-big{
			width: 680rpx;
			margin: 0 auto{
				bottom: 20rpx;
			};
			.box-cont{
				width: 680rpx;
				height: 240rpx;
				position: relative;
				
				&::after{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
					background:
					        -webkit-linear-gradient(top, transparent 19px, #a6d478 20px),
					        -webkit-linear-gradient(left, transparent 19px, #a6d478 20px)
					        ;
					background-size: 20px 20px;
				}
			}
		}
		&-cont{
			&-num{
				position: absolute;
				right: 15rpx;
				top: 5rpx;
				color: #277206;
				font-size: 52rpx;
				z-index: 1;
			}
		}
	}
	.line-charts {
		width: 740upx;
		height: 240upx;
		background-color: #ffffff;
		margin-left: -30rpx;
	}
	.bar-charts {
		width: 660upx;
		height: 240upx;
		background-color: #ffffff;
		position: absolute;
		top: 20%;
		left: -50%;
		margin-left: 78rpx;
	}
	
</style>
